<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="50%"
    :with-header="false"
    :width="700"
    append-to-body
  >
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            修改企业信息
          </div>
          <img
            class="drawer_t_r"
            src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="drawer = false"
          />
        </div>
      </div>
      <div class="drawer_content">
        <div class="title">企业信息：</div>
        <div class="content-box">
          <div class="label">所属集团：</div>
          <div class="desc">

          </div>
        </div>
        <div class="content-box">
          <div class="label">简称：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入公司简称"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">公司全称：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入公司全称"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">唯一识别码：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入公司唯一识别码"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">联系人：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入公司联系人"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">营业执照过期时间：</div>
          <div class="desc">
            <el-date-picker
              v-model="form.Name"
              type="datetime"
              placeholder="营业执照过期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="content-box">
          <div class="label">公司图标：</div>
          <div class="desc">
            
          </div>
        </div>
        <br />
        <div class="title">发票信息：</div>
        <div class="content-box">
          <div class="label">单位名称：</div>
          <div class="desc">{{ "单位名称" }}</div>
        </div>
        <div class="content-box">
          <div class="label">税号：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入税号"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">单位地址：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入单位地址"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">单位电话：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入单位电话"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">开户银行：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入开户银行"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">银行账号：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入银行账号"></el-input>
          </div>
        </div>
        <br />
        <div class="title">基本信息：</div>
        <div class="content-box">
          <div class="label">公司标签设置：</div>
          <div class="desc">
            <!-- 添加tag -->
          </div>
        </div>
        <div class="content-box">
          <div class="label">联系电话：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入联系电话"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">联系邮箱：</div>
          <div class="desc">
            <el-input v-model="form.Name" placeholder="请输入联系邮箱"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">公司介绍：</div>
          <div class="desc">
            <el-input  v-model="form.Name" placeholder="请输入公司介绍"></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">营业执照：</div>
          <div class="desc">
            <!-- 上传图片 -->
          </div>
        </div>
      </div>
      <div class="drawer_footer">
        <button class="footer-btn" @click="handleSubmit">保存</button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {
    messageList: {
      type: Object,
      default: {},
    },
    octopus: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      drawer: false,
      form: {

      },
    };
  },
  watch: {
    drawer(v) {
      if (v) {
        this.getEnterpriseInfo();
      }
    },
  },
  methods: {
    drawerOp() {
      this.drawer = true;
    },
    // 获取企业信息
    getEnterpriseInfo() {
    },
    // 保存企业信息
    handleSubmit() {
      this.updateEnterprise().then(res => {
        this.drawer = false
        this.$emit("invoiceInfo", {})
      })
    },
    // 更新企业信息
    updateEnterprise() {
      return new Promise((resolve, reject) => {
        resolve(true)
      })
    },
  },
};
</script>
<style scoped>
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}
.full-line {
  margin: 2rem auto;
  width: 95%;
  height: 1px;
  background-color: #f78c51;
}

.content-box {
  display: flex;
  align-items: center;
  margin: 2rem 0 2rem 2em;
}
.mt-10 {
  margin-top: 10rem;
}
.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
}

.content-box .desc .desc-img {
  width: 14rem;
  height: 14rem;
  border-radius: 1rem;
  display: inline-block;
  margin-right: 1rem;
  background-color: aqua;
}

.drawer_footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.drawer_footer .footer-btn {
  line-height: 4rem;
  background-color: #f78c51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
  font-size: 1.6rem;
}




</style>